<template>
  <div class="app-container">
    <div class="card">
      <div class="title">基本信息</div>
      <!-- <el-divider /> -->
      <div class="form">
        <el-form ref="dictRef" :model="form" :rules="rules" label-width="140px">
          <el-form-item label="收费站名称" prop="deptName" class="min-width">
            <el-input v-model="form.deptName" placeholder="请输入收费站名称" disabled="true" />
          </el-form-item>

          <el-form-item label="收费站图片" prop="stationImg">
            <ImageUpload :modelValue="form.stationImg" v-model="form.stationImg" />
          </el-form-item>
          <el-form-item label="临近收费站" prop="status">
            <div class="flex-column">
              <el-table :data="tableData" style="width: 500px" show-overflow-tooltip>
                <el-table-column label="序号" align="center" type="index" width="60" />
                <el-table-column prop="stationId" align="center" label="收费站名称" width="180">
                  <template #default="scope">
                    <div>
                      <el-tree-select v-model="tableData[scope.$index].stationId" :data="deptOptions"
                        :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择收费站" check-strictly clearable />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="distance" align="center" label="距离(km)" width="180">
                  <template #default="scope">
                    <div>
                      <el-input-number :controls="false" v-model="tableData[scope.$index].distance" placeholder="请输入" @input="bindChangeForm($event,scope.$index,'distance')"
                        class="inputDeep" />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="index" label="操作" width="90">
                  <template #default="scope">
                    <el-button link size="small" @click.prevent="deleteRow(scope.$index)">
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button class="mt-4" style="width: 500px" @click="onAddItem">
                添加
              </el-button>
            </div>

          </el-form-item>
          <el-form-item label="收费站简介" prop="stationNote">
            <Editor :modelValue="form.stationNote" v-model="form.stationNote" :minHeight="300" />
          </el-form-item>

       

        </el-form>
        <div class="footer">
          <el-button type="primary" @click="submitForm" class="el-btn"  v-hasPermi="['coordination:intro:add']">保存</el-button>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import ImageUpload from "@/components/ImageUpload";
import Editor from "@/components/Editor";
import useUserStore from '@/store/modules/user';
import { deptTreeSelect } from "@/api/system/user";
import { listIntro, getIntro, delIntro, addIntro, updateIntro } from "@/api/coordination/intro";

const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const tableData = ref([{ stationId: "", distance: "" }])
const form = ref({})
const rules = ref({})
const deptOptions = ref([])


const bindChangeForm = (val, index, name) => {
  tableData.value[index][name] = val;
}
const onAddItem = () => {
  tableData.value.push({})
}
const deleteRow = (index) => {
  tableData.value.splice(index, 1)
}
/** 查询部门下拉树结构 */
function getDeptTree() {
  deptTreeSelect().then(response => {
    deptOptions.value = response.data;
  });
};
/** 提交按钮 */
const submitForm = () => {
  proxy.$refs["dictRef"].validate(valid => {
    if (valid) {
      form.value.tbNearStationList = tableData.value;
      if (form.value.id != null) {
        updateIntro(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
        });
      } else {
        addIntro(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
        });
      }
    }
  });
}
const getDeptId = () => {
  userStore.getInfo().then(res => {
    if (res.code == 200) {
      form.value.stationId = res.user.dept.deptId;
      form.value.deptName = res.user.dept.deptName;
      init(form.value.stationId)
    }

  })
}
const init = (id) => {
  getIntro(id).then(response => {
    if (response.code == 200 && response.data) {
      form.value ={...response.data,...form.value};
      tableData.value = response.data.tbNearStationList;
    }

  });
}


getDeptId()
getDeptTree()
</script>

<style scoped>
.title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}
.min-width {
  width: 500px;
}
.footer {
  margin-left: 100px;
}
.el-btn {
  width: 100px;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.inputDeep {
  width: 100%;
  text-align: center;
}
.inputDeep >>> .el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: none !important;
  width: 100%;
  box-shadow: none !important;
  text-align: center;
}

.inputDeep >>> .el-input__inner:focus {
  outline: none;
}
.inputDeep >>> .el-input__wrapper {
  height: 50px;
  line-height: 50px;
  box-shadow: none !important;
}
.inputDeep >>> .el-input__wrapper:hover {
  box-shadow: none !important;
}
.inputDeep >>> .el-textarea__inner {
  height: 50px !important;
  line-height: 50px !important;
  min-height: 50px !important;
  box-shadow: none !important;
  border: none;
}

.row-cus {
  width: 1000px;
  background: #f5f5f5;
  padding: 20px 20px 20px 0;
  margin-bottom: 20px;
  margin-left: 20px !important;
  box-shadow: var(--el-box-shadow-light);
}
</style>